<template>
  <div class="container">
    <div class="content">
      <a-card title="班级管理" style="width: 400px">
        <template #extra>
          <a-button type="primary" @click="openAddCategoryModal()">添加班级</a-button>
        </template>
        <a-table :dataSource="categoryData" :columns="categoryColumns"
                 :rowClassName="(record: any, index: any) => getGroupRowClassName(record)" :pagination="false"
                 :customRow="customRow">
          <template #bodyCell="{ column, record}">
            <template v-if="column.key === 'action'">
              <a-button type="link" @click="openAddCategoryModal(record)">修改</a-button>
              <!--              <a-button type="link">删除</a-button>-->
            </template>
          </template>
        </a-table>
      </a-card>
      <a-card :title="cardTitleName" style="width: calc(100% - 416px)">
        <template #extra>
          <a-button type="primary" @click="openAddStudentModal()">新增</a-button>
        </template>
        <a-table :dataSource="studentData" :columns="studentColumns">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'action'">
              <a-button type="link" @click="openAddStudentModal(record)">编辑</a-button>
              <a-popconfirm
                title="确定删除？"
                ok-text="确定"
                cancel-text="取消"
                @confirm="delStudent(record.id)"
              >
                <a-button type="link" danger>删除</a-button>
              </a-popconfirm>
            </template>
          </template>
        </a-table>
      </a-card>
    </div>
    <!--  弹窗  -->
    <AddCategory ref="addCategory" @refresh="getCategoryList"></AddCategory>
    <AddStudent ref="addStudent" @refresh="getStudentList"></AddStudent>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, computed } from 'vue'
import AddCategory from './components/addCategory.vue'
import { fetchCategoryList, fetchStudentDel, fetchStudentList } from '@/api/student'
import AddStudent from './components/addStudent.vue'
import { message } from 'ant-design-vue'

onMounted(() => {
  getCategoryList()
  getStudentList()
})

/**
 * 左侧班级数据
 */
const categoryData = ref<any[]>([])
const categoryColumns = [
  {
    title: '班级名',
    dataIndex: 'category_name',
    align: 'center',
    key: 'category_name'
  },
  {
    title: '操作',
    width: '156px',
    align: 'center',
    dataIndex: 'action',
    key: 'action'
  }
]
const getCategoryList = async () => {
  const res = await fetchCategoryList({})
  categoryData.value = res.data.data.data
}
// 新增/编辑
const addCategory = ref()
const openAddCategoryModal = (record?: { category_name: string; id: number }) => {
  addCategory.value.openModal(record)
}

const getGroupRowClassName = computed(() => {
  return (record: any) => {
    if (studentSearch.value.category_id === record.id) return 'normal-row active'
    return 'normal-row'
  }
})

const customRow = (record: any) => {
  return {
    onClick: () => {
      studentSearch.value.category_id = record.id
      getStudentList()
    }
  }
}

/**
 * 右侧学生数据
 */
const studentSearch = ref({
  category_id: ''
})
const studentData = ref<any[]>([])
const studentColumns = [
  {
    title: '姓名',
    dataIndex: 'user_name',
    align: 'center',
    key: 'user_name'
  },
  {
    title: '学号（账号）',
    dataIndex: 'account',
    align: 'center',
    key: 'account'
  },
  {
    title: '状态',
    dataIndex: 'status_str',
    align: 'center',
    key: 'status_str'
  },
  {
    title: '操作',
    width: '156px',
    dataIndex: 'action',
    align: 'center',
    key: 'action'
  }
]

const cardTitleName = computed(() => {
  const filterList = categoryData.value.filter((item: any) => item.id === studentSearch.value.category_id)
  if (filterList && filterList.length) return filterList[0].category_name
  return '全部'
})

const getStudentList = async () => {
  const res = await fetchStudentList({
    conditions: [
      {
        key: 'category_id',
        operator: 'like',
        value: studentSearch.value.category_id
      }
    ]
  })
  studentData.value = res.data.data
}
const delStudent = async (id: number) => {
 await fetchStudentDel(id)
  message.success('删除成功')
  await getStudentList()
}
// 新增/编辑
const addStudent = ref()
const openAddStudentModal = (record?: any) => {
  addStudent.value.openModal(record, categoryData.value)
}

</script>

<style lang="scss" scoped>
.container {
  .content {
    display: flex;
    justify-content: space-between;

    :deep(.ant-card-head-title) {
      font-weight: bold;
    }
  }
}
:deep(.normal-row){
  cursor: pointer;
  &.active {
    background-color: #fafafa;
  }
}

</style>